<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"><head> 
  <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
  <meta name="robots" content="NONE,NOARCHIVE"><title>django orbited chat</title>
  <style type="text/css"> 
    html * { padding:0; margin:0; }
    body * { padding:10px 20px; }
    body * * { padding:0; }
    body { font:small sans-serif; }
    body>div { border-bottom:1px solid #ddd; }
    h1 { font-weight:normal; }
    h2 { margin-bottom:.8em; }
    h2 span { font-size:80%; color:#666; font-weight:normal; }
    h3 { margin:0em 0 .5em 0; }
    h4 { margin:0 0 .5em 0; font-weight: normal; }
    table { border:1px solid #ccc; border-collapse: collapse; width:100%; background:white; }
    tbody td, tbody th { vertical-align:top; padding:2px 3px; }
    thead th { padding:1px 6px 1px 3px; background:#fefefe; text-align:left; font-weight:normal; font-size:11px; border:1px solid #ddd; }
    tbody th { width:12em; text-align:right; color:#666; padding-right:.5em; }
    ul, ol { margin-left: 2em; margin-top: 1em; }
    #summary { background: #333; }
    #summary h2 { font-weight: normal; color: #eee; }
     #summary h1 a{ font-weight: bold; color: #fff; }
    #explanation { background:#eee; }
    #instructions { background:#f6f6f6; }
    #example1 { background:#ffeeee; }
    #example2 { background:#eeffee; }
    #footer { background:#333; font-size: 0.8em;}
    #summary table { border:none; background:transparent; }
    #chat {
        width:500px;
        height:300px;
        background:white;
        border:1px solid red;
        padding:5px;
        margin:10px;
        overflow:auto;

}
#chat p {
    width:450px;
    padding:3px;
    margin:10px;
    background: #eee;
    border: 1px dotted #ccc;
}
  </style>
  <link href="/media/css/chat.css" rel="stylesheet" type="text/css" media="screen,projection" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script>!window.jQuery && document.write('<script src="http://code.jquery.com/jquery-1.4.2.min.js"><\/script>');</script>

  <script type="text/javascript" src="/chat/static/hookbox.js"></script>
   <script type="text/javascript">

       $(document).ready(function(){



function addHistory(msg) {
        $('#chat').prepend('<p>' + msg + '</p>');
      }

      $('#submit').click(function(e) {
        var chatInput = $('#m');
        conn.publish('testing', chatInput.val());
        chatInput.val('');
        return false;
      });

      
      conn = hookbox.connect('http://m4it.pl/chat/');
      conn.onOpen = function() { $('#chat').prepend('<p>connection established!</p>'); }
      conn.onError = function(err) { $('#chat').prepend('<p>connection failed: ' + err.msg + '</p>'); }




      
      conn.onSubscribed = function(channel_name, subscription) {
          subscription.onSubscribed = function(frame) {
          addHistory(frame.user + 'has join the channel ' );
        };

        subscription.onPublish = function(frame) {
          addHistory(frame.user + ': ' + frame.payload);
        };
      }

     
      conn.subscribe('testing');
    });





   </script>
</head> 
 
<body> 
<div id="summary"> 
  <h1><a href="/" >Chat by lipt0n.</a></h1>
  <h2>powered by django, twisted, orbited, jquery</h2>
  <h2> klikać na "send" bo enterem jeszcze nie bangla xD</h2>
</div> 
    <div id="content">
{% block content %}{% endblock %}
    </div>
    
<div id="footer">
</div>
</body></html> 
